<template>
  <div class="message-page s1">
    <div class="msg-cont">
      <div ref="eCont"></div>
    </div>
  </div>
</template>

<script>
import imgsComplete from '@/modules/corejs/dom/imgs-complete'
import TextMarquee from '@/modules/marquee-text/text-marquee'
import ajaxApi from '@/modules/ajax-api'
export default {
  name: 'Temp1msg',
  data () {
    return {
      content: '',
      classId: ''
    }
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.update()
  },
  mounted () {
    var el = this.$el.children[0]
    this.textMarquee = new TextMarquee({
      eBox: el,
      eText: el.children[0]
    })
    this.update()
  },
  destroyed () {
    this.textMarquee.destroy()
  },
  methods: {
    update () {
      ajaxApi.getNoticeByEquipmentCode(2).then(data => {
        if (data.title && data.content) {
          data.content = '<h1 style="font-size:40px!important;text-align:center;margin-top:0">' + data.title + '</h1>' + data.content
        }

        let content = this.content = data.content

        if (this.content) {
          this.$refs.eCont.innerHTML = content
          let imgs = this.$el.getElementsByTagName('img')
          if (imgs.length) {
            imgsComplete(imgs, () => {
              this.textMarquee.downUpdate()
            })
          } else {
            this.textMarquee.downUpdate()
          }
        }
      })
    }
  }
}
</script>

<style>
  .message-page.s1 {
    height: 1920px;
    background: #0cf url("imgs/msg-bg1.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    position: relative;
  }
  .message-page.s1 .msg-cont {
    width: 970px; height: 1672px; background-color: rgba(255,255,255,0.3); border-radius: 20px; margin: 154px auto 0; overflow: hidden;
    box-sizing: border-box;
    padding: 30px;
  }
  .message-page.s1 .msg-cont>div {  font-size: 28px !important; }
  .message-page.s1 .msg-cont * { background-color: transparent !important; }
</style>
